<script setup lang="ts">
import { PlusIcon, GhostIcon } from 'lucide-vue-next'
import { useVueFlow } from '@vue-flow/core'
import { useClipboard } from '@vueuse/core'
import { Tabs, TabsTrigger, TabsContent, TabsList } from '@/components/ui/tabs'
import { ScrollArea } from '@/components/ui/scroll-area'
import mainCanvas from '@/components/main-canvas.vue'
import { Button } from '@/components/ui/button'
import { Toaster, useToast } from '@/components/ui/toast'
import { getQueryParam } from '@/lib/utils'
import {publishWorkFlow,updateWorkFlow} from '@/api/index'
import { ref,watch} from 'vue'
import Drawer from '@/components/vue-flow/nodes/drawer.vue'

function handleOnDragStart(event: DragEvent, nodeType: any) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', nodeType)
    event.dataTransfer.effectAllowed = 'move'
  }
}
const name = ref(getQueryParam('name'))

const { toObject } = useVueFlow()
const { copy } = useClipboard()
const { toast } = useToast()
const drawerRef = ref(null)
function handleClickGetData() {
  
  copy(JSON.stringify(toObject())).then(() => {
    toast({
      title: 'copied success'
    })
  })
}

async function handleClickPublishBtn() {
  const code = getQueryParam('code')
  const {data,msg} = await publishWorkFlow({code})
  if(data){
    toast({
      title: '部署成功',
    })
  }else{
    toast({
      title: msg,
      variant: "destructive"
    })
  }
}
const showDraw = ref(false)
// const debuggerFunc = ()=>{ //调试debugger
//   // if (drawerRef.value) {
//   //       drawerRef.value.onOpen();
//   //     }
  
// }
async function handleClickUpDateBtn() {
  const name = getQueryParam('name')
  const code = getQueryParam('code')
  const version = getQueryParam('version')
  const desc = getQueryParam('desc')
  const nodeData = {
    name,code,version,desc,
    ...toObject()
  }
  nodeData.nodes = nodeData.nodes.filter(item=>item.type!=='debugger')
  const {data,msg} = await updateWorkFlow({...nodeData})
  if(data){
    toast({
      title: '保存成功',
    })
  }else{
    toast({
      title: msg,
      variant: "destructive"
    })
  }
  // toast({
  //   title: 'Save Data',
  //   description: '1.valid data 2.fetch backend api to save result'
  // })
}

</script>

<template>
  <div class="absolute bottom-0 left-0 right-0 top-0">
    <div class="relative flex h-full w-full flex-col">
      <header class="h-20 border-b border-gray-200 px-4 py-3">
        <div class="flex h-full items-center justify-between">
          <div class="flex gap-x-3">
            <div class="flex items-center gap-x-1">
             <img src="./assets/images/logo.png" width="36" alt="">
              <div class="flex flex-col ml-3">
                <div class="flex items-center gap-x-3">
                  <p class="text-bold">
                    {{ name }}
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="flex gap-x-3">
            <Button variant="default" size="sm" class="text-blue-800" @click="handleClickGetData"> 生成JSON </Button>
            <Button variant="default" size="sm" @click="showDraw=true"> 调试 </Button>
            <Button variant="default" size="sm" @click="handleClickUpDateBtn"> 保存 </Button>
            <Button variant="outline" size="sm" @click="handleClickPublishBtn"> 部署 </Button>
          </div>
        </div>
      </header>
      <main class="relative flex h-full w-full flex-1">
        <div class="w-2/12 bg-slate-50">
          <tabs default-value="basic-nodes">
            <tabs-list class="ml-5 mr-5 mt-5 grid grid-cols-1">
              <tabs-trigger value="basic-nodes"> 选择节点 </tabs-trigger>
              <!-- <tabs-trigger value="plugins"> 插件 </tabs-trigger>
              <tabs-trigger value="workflows"> 工作流实例 </tabs-trigger> -->
            </tabs-list>
            <tabs-content value="basic-nodes">
              <scroll-area class="h-[calc(100vh-150px)] w-full">
                <div
                  class="mx-6 mb-3 cursor-grab rounded-md bg-white p-3 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'module')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon_LLM.png" class="h-4 w-4" alt="LLM icon" />
                      大模型节点
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <!-- <p class="mt-2 text-sm text-gray-400">
                    调用大语言模型,使用变量和提示词生成回复
                  </p> -->
                </div>
                <!-- <div
                  class="mx-6 mb-3 cursor-grab rounded-md bg-white p-3 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'code')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon_Code.png" class="h-4 w-4" alt="LLM icon" />
                      代码
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <p class="mt-2 text-sm text-gray-400">
                    编写代码，处理输入变量来生成返回值
                  </p>
                </div> -->
                <div
                  class="mx-6 mb-3 cursor-grab rounded-md bg-white p-3 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'knowledge')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon_Knowledge.png" class="h-4 w-4" alt="知识库" />
                      知识库
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <!-- <p class="mt-2 text-sm text-gray-400">
                    在选定的知识中,根据输入变量召回最匹配的信息,并以列表形式返回
                  </p> -->
                </div>
                <div
                  class="mx-6 mb-3 cursor-grab rounded-md bg-white p-3 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'selector')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon-Condition.png" class="h-4 w-4" alt="知识库" />
                      if分支
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <!-- <p class="mt-2 text-sm text-gray-400">
                    在选定的知识中,根据输入变量召回最匹配的信息,并以列表形式返回
                  </p> -->
                </div>
                <div
                  class="mx-6 mb-3 cursor-grab rounded-md bg-white p-3 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event,'plugin')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon_Api.png" class="h-4 w-4" alt="插件节点" />
                      插件节点
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                </div>
              </scroll-area>
            </tabs-content>

            <tabs-content value="plugins">
              <scroll-area class="h-[calc(100vh-150px)] w-full">
                <div
                  class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'plugin')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <img src="~@/assets/images/icon_Google.jpeg" class="h-4 w-4" alt="Google icon" />
                      Google Web 搜索引擎
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <p class="mt-2 text-sm text-gray-400">
                    谷歌搜索引擎。在需要搜索你需要的信息，比如天气、汇率、当前事件时非常有用。
                  </p>
                </div>
              </scroll-area>
            </tabs-content>

            <tabs-content value="workflows">
              <scroll-area class="h-[calc(100vh-150px)] w-full">
                <div
                  class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
                  :draggable="true"
                  @dragstart="handleOnDragStart($event, 'workflow')"
                >
                  <div class="flex items-center justify-between">
                    <h3 class="flex items-center gap-x-1">
                      <GhostIcon class="w-12 text-blue-400" />
                      test_node
                    </h3>
                    <plus-icon class="text-primary" />
                  </div>
                  <p class="mt-2 border-b pb-2 text-sm text-gray-400">测试工作六，初始化数据</p>
                  <div class="pt-2 text-xs text-gray-400">时间: 2024-02-01</div>
                </div>
              </scroll-area>
            </tabs-content>
          </tabs>
        </div>
        <div class="relative h-full flex-1 overflow-hidden">
          <main-canvas />
        </div>
      </main>
    </div>
    <Drawer v-model:showDraw="showDraw" ref="drawerRef" />
  </div>
  <Toaster />
</template>
<style>
.m-drawer-mask{
  display: none;
}
</style>